<template>
  <div v-if="securityContext">
    <el-form
      ref="form"
      label-position="top"
      :model="securityContext"
      :disabled="readonly"
    >
      <k-section title="访问控制" type="border">
        <div class="flex flex-col gap-5">
          <div class="flex flex-col">
            <div class="flex gap-2">
              <el-switch v-model="securityContext.privileged" />
              <div class="title-subtitle">
                <span>{{ $t("business.workload.privileged") }}</span>
                <div>以主机上的 root 用户运行容器进程。</div>
              </div>
            </div>
          </div>
          <div class="flex flex-col">
            <div class="flex gap-2">
              <el-switch v-model="securityContext.allowPrivilegeEscalation" />
              <div class="title-subtitle">
                <span>{{ $t("business.workload.privilege_escalation") }}</span>
                <div>
                  允许容器进程获取比父进程更多的特权。当特权模式启用时，此选项目默认启用。
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col">
            <div class="flex gap-2">
              <el-switch v-model="securityContext.readOnlyRootFilesystem" />
              <div class="title-subtitle">
                <span>
                  {{ $t("business.workload.read_only_root_filesystem") }}
                </span>
                <div>将容器文件系统的根目录设置为只读。</div>
              </div>
            </div>
          </div>
        </div>
      </k-section>

      <k-section title="用户与组" type="border" class="mt-5">
        <div class="flex flex-col gap-5">
          <div class="flex flex-col">
            <div class="flex gap-2">
              <el-switch v-model="securityContext.runAsNonRoot" />
              <div class="title-subtitle">
                <span>{{ $t("business.workload.run_as_non_root") }}</span>
                <div>
                  启动容器之前检查容器是否将以 root 用户运行。如果容器将以 root
                  用户运行则不启动容器。
                </div>
              </div>
            </div>
          </div>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="$t('business.workload.run_as_user')"
                prop="runAsUser"
              >
                <ko-data-item
                  v-model="securityContext.runAsUser"
                  class="w-full"
                  itemType="input"
                  placeholder="执行容器进程入口点的 UID。默认为镜像元数据中指定的 UID。"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                :label="$t('business.workload.run_as_group')"
                prop="runAsGroup"
              >
                <ko-data-item
                  v-model="securityContext.runAsGroup"
                  class="w-full"
                  itemType="input"
                  placeholder="执行容器进程入口点的 GID。默认为容器运行时的默认 GID。"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="false" :span="12">
              <el-form-item
                :label="$t('business.workload.proc_mount')"
                prop="procMount"
              >
                <ko-data-item
                  v-model="securityContext.procMount"
                  itemType="input"
                  placeholder="procMount"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </k-section>

      <k-section
        :title="$t('business.workload.seLinuxOptions')"
        type="border"
        class="mt-5"
      >
        <div class="w-full">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="等级" prop="seLinuxOptions.level">
                <ko-data-item
                  v-model="securityContext.seLinuxOptions.level"
                  class="w-full"
                  itemType="input"
                  placeholder="level"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色" prop="seLinuxOptions.role">
                <ko-data-item
                  v-model="securityContext.seLinuxOptions.role"
                  class="w-full"
                  itemType="input"
                  placeholder="role"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="类型" prop="seLinuxOptions.type">
                <ko-data-item
                  v-model="securityContext.seLinuxOptions.type"
                  class="w-full"
                  itemType="input"
                  placeholder="type"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户" prop="seLinuxOptions.user">
                <ko-data-item
                  v-model="securityContext.seLinuxOptions.user"
                  class="w-full"
                  itemType="input"
                  placeholder="user"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </k-section>

      <k-section :title="'权能'" type="border" class="mt-5">
        <div class="flex flex-col">
          <el-form-item label="添加" prop="capabilities.add">
            <div
              v-for="(item, index) in securityContext?.capabilities?.add ?? []"
              :key="index"
              class="flex flex-row w-full items-end gap-3 mb-2"
            >
              <ko-data-item
                v-model="securityContext.capabilities.add[index]"
                class="w-full"
                item-type="input"
                placeholder="添加权能"
              />
              <el-button
                icon="Delete"
                circle
                @click="onHandleCapAddDelete(index)"
              />
            </div>
            <div class="w-full justify-end flex">
              <el-button icon="Plus" type="primary" @click="onHandleCapAdd">
                添加权能
              </el-button>
            </div>
          </el-form-item>

          <el-form-item label="移除" prop="capabilities.drop">
            <div
              v-for="(item, index) in securityContext.capabilities?.drop ?? []"
              :key="index"
              class="flex flex-row w-full items-end gap-3 mb-2"
            >
              <ko-data-item
                :key="index"
                v-model="securityContext.capabilities.drop[index]"
                class="w-full"
                item-type="input"
                placeholder="移除权能"
              />
              <el-button
                icon="Delete"
                circle
                @click="onHandleCapDropDelete(index)"
              />
            </div>
            <div class="w-full justify-end flex">
              <el-button icon="Plus" type="primary" @click="onHandleCapDrop">
                移除权能
              </el-button>
            </div>
          </el-form-item>
        </div>
      </k-section>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import KSection from "@/views/domain/kubeHud/views/components/k-section/index.vue";

import { computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { PodSecurityContext, SecurityContext } from "../../../api/k8s";
const { t } = useI18n();

type Prop = {
  readonly?: boolean;
};
const props = withDefaults(defineProps<Prop>(), {
  readonly: false
});

const securityContext = defineModel<SecurityContext>("securityContext", {
  default: {
    capabilities: {},
    seLinuxOptions: {}
  }
});

const capabilities = computed(() => {
  if (!securityContext.value.capabilities) {
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    securityContext.value.capabilities = { add: [], drop: [] };
  }
  return securityContext.value.capabilities;
});

const uiState = reactive({
  privileged_list: [
    { label: t("business.workload.no"), value: false },
    { label: t("business.workload.full_access"), value: true }
  ],
  privileged_escalation_list: [
    {
      label: t("business.workload.no"),
      value: false,
      disabledOption: false
    },
    { label: t("business.workload.gain_more_privileges"), value: true }
  ],
  non_root_list: [
    { label: t("business.workload.no"), value: false },
    { label: t("business.workload.non_root"), value: true }
  ],
  ready_only_root_files_list: [
    { label: t("business.workload.no"), value: false },
    { label: t("business.workload.filesystem_read_only"), value: true }
  ],
  capability_list: [
    "ALL",
    "AUDIT_CONTROL",
    "AUDIT_WRITE",
    "BLOCK_SUSPEND",
    "CHOWN",
    "DAC_OVERRIDE",
    "DAC_READ_SEARCH",
    "FOWNER",
    "FSETID",
    "IPC_LOCK",
    "IPC_OWNER",
    "KILL",
    "LEASE",
    "LINUX_IMMUTABLE",
    "MAC_ADMIN",
    "MAC_OVERRIDE",
    "MKNOD",
    "NET_ADMIN",
    "NET_BIND_SERVICE",
    "NET_BROADCAST",
    "NET_RAW",
    "SETFCAP",
    "SETGID",
    "SETPCAP",
    "SETUID",
    "SYSLOGSYS_ADMIN",
    "SYS_BOOT",
    "SYS_CHROOT",
    "SYS_MODULE",
    "SYS_NICE",
    "SYS_PACCT",
    "SYS_PTRACE",
    "SYS_RAWIO",
    "SYS_RESOURCE",
    "SYS_TIME",
    "SYS_TTY_CONFIG",
    "WAKE_ALARM"
  ]
});

const onHandleCapAdd = () => {
  if (!capabilities.value?.add) {
    capabilities.value.add = [];
  }
  capabilities.value.add.push("");
};

const onHandleCapAddDelete = (index: number) => {
  capabilities.value?.add?.splice(index, 1);
};

const onHandleCapDrop = () => {
  if (!capabilities.value?.drop) {
    capabilities.value.drop = [];
  }
  capabilities.value.drop.push("");
};
const onHandleCapDropDelete = (index: number) => {
  capabilities.value?.drop?.splice(index, 1);
};
</script>

<style lang="scss" scoped>
.title-subtitle {
  display: flex;
  flex-direction: column;

  > span {
    min-height: 20px;
    font-weight: bold;
    font-size: 14px;
    color: var(--el-text-color-primary);
  }
  > div {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}
</style>
